<template>
  <a-layout style="padding: 24px 0; background: #fff">
    <a-layout-sider style="background: #fff" width="200">
      <a-menu
        :default-open-keys="['sub1']"
        :default-selected-keys="['sub1']"
        mode="inline"
        style="height: 100%"
        @click="handleClick"
      >
        <template v-for="i in filterPersons">
          <a-menu-item v-if="i.single" :key="i.key">
            <a-icon :type="i.logo" style="margin-right: 14px" />
            <span>{{ i.name }}</span>
          </a-menu-item>
          <a-sub-menu v-if="!i.single" :key="i.key">
            <span slot="title"> <a-icon :type="i.logo" style="margin-left: 4px" /> {{ i.name }}</span>
            <a-menu-item v-for=" it in i.items" :key="it.key">
              {{ it.name }}
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </a-layout-sider>
    <a-layout-content :style="{ padding: '0 24px', minHeight: '560px' }">
      <enterprise-ranking v-if="currentPage == 'sub1'" />
      <company-middle v-if="currentPage == 'sub2'" />
<!--      <key-industry-ranking v-if="currentPage == 'sub3'" />-->
<!--      <industry-proportion v-if="currentPage == 'sub4'" />-->
    </a-layout-content>
  </a-layout>
<!--  <enterprise-ranking v-if="currentPage == 'sub1'" />-->
</template>

<script>
import CurrentEngConsumption from '@views/dataVisualization/components/currentEngConsumption'
import EnterpriseRanking from '@views/dataVisualization/components/enterpriseRanking'
import CompanyMiddle from '@views/dataVisualization/components/companyMiddle'
import IndustryProportion from '@views/dataVisualization/components/industryProportion'
import KeyIndustryRanking from '@views/dataVisualization/components/keyIndustryRanking'

const sort = ['能源消费企业排名','中间数据'] // 侧边栏排序，左边数组的从左至右对应侧边栏从上至下
// const sort = ['能源消费企业排名','中间数据','重点行业排名','细分行业占比'] // 侧边栏排序，左边数组的从左至右对应侧边栏从上至下


export default {
  components: {
    KeyIndustryRanking,
    IndustryProportion,
    CompanyMiddle,
    EnterpriseRanking,
    CurrentEngConsumption,
  },
  data() {
    return {
      sort2: sort,
      currentPage: 'sub' + (sort.indexOf('能源消费企业排名') + 1).toString(),
      collapsed: false,
      list: [
        {
          name: '能源消费企业排名',
          key: 'sub' + (sort.indexOf('能源消费企业排名') + 1).toString(),
          logo: 'stock',
          single: true
        },
        // {
        //   name: '重点行业排名',
        //   key: 'sub' + (sort.indexOf('重点行业排名') + 1).toString(),
        //   logo: 'dot-chart',
        //   single: true
        // },
        // {
        //   name: '细分行业占比',
        //   key: 'sub' + (sort.indexOf('细分行业占比') + 1).toString(),
        //   logo: 'pie-chart',
        //   single: true
        // },
        {
          name: '中间数据',
          key: 'sub' + (sort.indexOf('中间数据') + 1).toString(),
          logo: 'control',
          single: true
        },
      ]
    }
  },
  computed: {
    filterPersons() {
      // 1. 得到依赖数据
      const { list } = this

      // 2. 进行计算处理, 产生结果数据并返回
      // 过滤
      const arr = list.filter(p => p.key)

      arr.sort((a, b) => {
        //  截取最后一个字母之后的字符串
        const aLast = a.key.slice(3)
        const bLast = b.key.slice(3)
        return aLast - bLast
      })

      return arr
    }
  },
  methods: {
    //路由内容切换
    changeMenu(route) {
      console.log(route)
      //获取路由对象并切换
      this.$router.push(route)
    },
    handleClick(item) {
      this.currentPage = item.key
    }
  }
}
</script>

<style lang="stylus" scoped>
#components-layout-demo-top-side .logo {
  width: 120px;
  height: 31px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px 28px 16px 0;
  float: left;
}

/deep/ .ant-menu-sub.ant-menu-inline {
  background-color: #FAFAFA !important;
}

/deep/ .ant-menu-inline .ant-menu-item, .ant-menu-inline .ant-menu-submenu-title {
  width: calc(96% + 1px) !important;
  margin-left: 2%;
}

/deep/ .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
  border-radius 8px
  background-color: #E6F7FF !important;
}

/deep/ .ant-menu-vertical .ant-menu-item::after, .ant-menu-vertical-left .ant-menu-item::after, .ant-menu-vertical-right .ant-menu-item::after, .ant-menu-inline .ant-menu-item::after {
  border: none !important;
}
</style>

